<template>
  <view class="ai-user-level" :class="type">
    <view class="icon-box">
      <text class="iconfont icon-level"></text>
    </view>
    <text class="lvl-name">{{level}}</text>
  </view>
</template>

<script>
  export default {
    name: "ai-user-level",
    props: {
      level: String,
      type: String
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";
  @import "@/styles/_icon.scss";
  

  $size: 18px;
  $gold: #FFECB6;
  $gold-bg: linear-gradient(180deg, #FFF, #FFF4D2);
  $gold-text: #663300;
  $gold-text-lighter: #A88100;

  .ai-user-level {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-size: $font-size-sm;
    border-radius: $size * 0.5;
    height: $size;

    .icon-box {
      height: $size;
      width: $size;
      line-height: $size;
      text-align: center;
      border-radius: $size * 0.5;

      .icon-level {
        font-size: $font-size-xs;
      }
    }

    .lvl-name {
      padding:0 4px;
    }

    &.gold {
      background: $gold-bg;
      color: $gold-text;

      .icon-box {
        background-color: $gold;

        .icon-level {
          color: $gold-text;
        }
      }
    }

  }
</style>